<template>
<el-card shadow="always" class="card">
  <div style="font-size:30px">注册</div>
   <el-icon size="30" color="red"><CloseBold style="width: 1em; height: 1em; margin-left: 8px" @click="quxiao"/></el-icon>
 <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="100px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model.trim="ruleForm.username" autocomplete="off" placeholder="请输入登录名"/>
    </el-form-item>
    <el-form-item label="密码" type="password" prop="password">
      <el-input v-model.trim="ruleForm.password" autocomplete="off" placeholder="请输入登录密码"/>
    </el-form-item>
    <el-form-item label="确认密码" type="password" prop="password">
      <el-input v-model.trim="ruleForm.passsword" autocomplete="off" placeholder="请输入请再次确定密码"/>
    </el-form-item>
    <el-form-item label="联系电话" prop="password">
      <el-input v-model.trim="password2" autocomplete="off" placeholder="请再次输入密码"/>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm(ruleFormRef)" style="display:block;margin:0 auto">提交</el-button>
      <el-button @click="resetForm(ruleFormRef)">重置</el-button>
    </el-form-item>
  </el-form>
</el-card>
</template>

<script setup>
import { inject, reactive, ref, toRefs,getCurrentInstance } from 'vue'
import { FormInstance } from 'element-plus'
const {appContext:{config:{globalProperties:$http}}} = getCurrentInstance()
const ruleFormRef = ref<FormInstance>('')
let ruleForm = reactive({
  uid:"",
  username: "",
  password: "",
  phone:"",
  deleted:0,
  enabled:'B'
})
let passsword2 = ref()

const rules = reactive<import('element-plus').FormRules>({
  username: [{ required:true,message:"请输入用户名",type:'String', trigger: 'blur'},
             {min: 6, max: 50, message: '用户名长度在 6 到 50 个字符', trigger: 'blur'}],
  password: [{required:true,message:"请输入密码",type:'String', trigger: 'blur' },
             {min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur'}],
  password2: [{required:true,message:"请输入密码",type:'String', trigger: 'blur' },
             {min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur'}],
})
const isRegister=inject('isRegister')
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    $http.$http.post(`/user/registor`,ruleForm).then((res) => {
        ruleForm=res
        console.log(res)
      },(err)=>{
        alert("数据请求失败")
      })
  })
};
const quxiao = ()=>{
  isRegister.changeit2()
}
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
} 
const{username,password,password2} = toRefs(ruleForm)
</script>
<style lang="less" scoped>
.card{
  width: 500px;
    height: 325px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    padding:30px 40px 0 10px;
    box-shadow: -15px 15px 20px #8d939c;
    opacity: 1;
    background: linear-gradient(
          230deg,
          rgba(143, 191, 219, 0) 0%,
          rgb(143, 108, 193) 100%
    );
  .el-form {
  margin-top: 0px;
}
}
</style>